import { useGlobalStore } from '@/store/global'
import { CheckBox, Input, Select, Switch } from '@kedacom/react-next'
import shallow from 'zustand/shallow'
import CreateMember from '../../components/CreateMember'
import { useMeetingLiveVideoStore } from './store'
import { StyledWrap } from './style'
import { useMeetingParamsStore } from '../meetingParams/store'
import { init as addMtInit, resetAllStore } from '@/components/AddMt/store.trans'
import { setVlList } from '../../store.combine'
import LabelWrap from '../../components/LabelWrap'
import { t } from 'i18next'

export default function MeetingLiveVideo() {
	const { user, SWITCH } = useGlobalStore((state) => ({ user: state.user, SWITCH: state.SWITCH }), shallow)

	const {
		enable_video,
		anonymous,
		update,
		live_password,
		publish_mode,
		dual_stream,
		enable_live,
		live_members,
		wechat,
		sms,
		email,
		vrs_id,
		vrsIdList,
		isShowVrsList,
		changeEnableLive,
		reviseUser,
		getLiveMembersForAddModal,
	} = useMeetingLiveVideoStore(
		(state) => ({
			update: state.update,
			enable_video: state.enable_video,
			publish_mode: state.publish_mode,
			dual_stream: state.dual_stream,
			anonymous: state.anonymous,
			enable_live: state.enable_live,
			live_password: state.live_password,
			live_members: state.live_members,
			wechat: state.wechat,
			sms: state.sms,
			email: state.email,
			vrs_id: state.vrs_id,
			vrsIdList: state.vrsIdList,
			isShowVrsList: state.isShowVrsList,
			changeEnableLive: state.changeEnableLive,
			getLiveMembersForAddModal: state.getLiveMembersForAddModal,
			reviseUser: state.reviseUser,
		}),
		shallow
	)

	const handleOpenLiveModal = () => {
		if (!enable_live) {
			return
		}
		addMtInit({
			showTrees: ['org'],
			title: t('添加通知人员'),
			selectedEntityMts: getLiveMembersForAddModal(),
			meetingType: useMeetingParamsStore.getState().meetingType,
			isOnlyMakeUser: true,
			onSubmit: ({ selectedList, cascadeType, smcuMtid }) => {
				let selectedUserByWin = reviseUser(selectedList)
				setVlList([
					...live_members,
					...selectedUserByWin.map((item) => {
						return {
							account: item.account ?? '',
							account_type: item.accountType ?? 1,
							name: item.name ?? '',
							portrait: item.portrait ?? '',
							e164: item.e164 ?? '',
						}
					}),
				])
				resetAllStore()
			},
			isOpen: true,
		})
	}

	return (
		<StyledWrap className="live_and_viedo">
			{isShowVrsList && (
				<LabelWrap label={t('录播服务器')}>
					<Select
						value={vrs_id}
						placeholder={t('请选择')}
						options={vrsIdList}
						onChange={(e, val, opt, values) => {
							update({ vrs_id: val })
						}}
					/>
				</LabelWrap>
			)}
			{!!user?.enable_video && !!SWITCH.vrs.video && (
				<LabelWrap label={t('会议录像')}>
					<Switch
						width={40}
						height={22}
						className="video"
						checked={enable_video}
						onChange={(e, v) => {
							update({ enable_video: v })
						}}
					></Switch>
					<CheckBox
						checked={!!publish_mode}
						onChange={(e, v) => {
							update({ publish_mode: v ? 1 : 0 })
						}}
						disabled={!enable_video}
						className="publish_mode"
					>
						{t('发布到视频点播')}
					</CheckBox>
					<CheckBox
						checked={!!dual_stream}
						onChange={(e, v) => {
							update({ dual_stream: v ? 1 : 0 })
						}}
						className="dual_stream"
						disabled={!enable_video}
					>
						{t('内容共享录像')}
					</CheckBox>
				</LabelWrap>
			)}
			{!!user?.enable_live && !!SWITCH.vrs.live && (
				<>
					<LabelWrap label={t('会议直播')}>
						<Switch
							width={40}
							height={22}
							className="live"
							checked={enable_live}
							onChange={(e, v) => {
								changeEnableLive(v)
							}}
						></Switch>
						<CheckBox
							checked={!!anonymous}
							onChange={(e, v) => {
								update({ anonymous: v ? 1 : 0 })
							}}
							disabled={!enable_live}
							className="anonymous"
						>
							{t('免登录观看直播')}
						</CheckBox>
					</LabelWrap>
					{!!enable_live && (
						<LabelWrap label={t('直播密码')}>
							<Input
								width={200}
								value={live_password}
								placeholder={t('请设定密码')}
								focusMsg={t('输入6个字符，支持大小写字母和数字')}
								rule={{
									regular: [
										{
											regex: /^[a-zA-Z0-9]*$/,
											msg: t('直播密码存在非法字符,请重新输入'),
										},
										{
											regex: /^([a-zA-Z0-9]{6})$/,
											msg: t('输入6个字符，支持大小写字母和数字'),
										},
									],
								}}
								maxLength={6}
								onChange={(e, v) => {
									update({ live_password: v })
								}}
							/>
						</LabelWrap>
					)}
					<CreateMember
						title={t('直播通知人员列表')}
						width={500}
						height={340}
						list={live_members}
						disabled={!enable_live}
						setOuterList={(h, type) => {
							if (type === 'drop') {
								setVlList(h)
							} else {
								update({ live_members: h })
							}
						}}
						isShowBottomTip={false}
						isHideOrder={true}
					>
						<div className="live_add_mt" onClick={handleOpenLiveModal}>
							<span className="add_icon"></span>
							<span className="add_tip">{t('添加通知人员')}</span>
						</div>
					</CreateMember>
					<LabelWrap label={t('通知方式')} className={`notify-wrap ${!enable_live ? 'disabled' : ''}`}>
						<CheckBox
							checked={!!email}
							onChange={(e, v) => {
								update({ email: v ? 1 : 0 })
							}}
							className="email"
							width={120}
							disabled={!enable_live}
						>
							{t('邮件通知')}
						</CheckBox>
						{!!user?.enable_meeting_sms && (
							<CheckBox
								checked={!!sms}
								onChange={(e, v) => {
									update({ sms: v ? 1 : 0 })
								}}
								className="sms"
								width={120}
								disabled={!enable_live}
							>
								{t('短信通知')}
							</CheckBox>
						)}
						{!!user?.enable_meeting_wechat && (
							<CheckBox
								checked={!!wechat}
								onChange={(e, v) => {
									update({ wechat: v ? 1 : 0 })
								}}
								className="wechat"
								width={120}
								disabled={!enable_live}
							>
								{t('微信通知')}
							</CheckBox>
						)}
					</LabelWrap>
				</>
			)}
		</StyledWrap>
	)
}
